<template>
  <!--我的审批-公共审批-组件 -->
  <section class="component case-approval-common">
    <el-form ref='form' :rules="rules" label-width="90px" :model="applyModel">
      <!-- 停催-->
      <el-row>
        <el-col :span="12">
          <el-form-item label="停催类型" v-if="rowData.applyCategory==='PAUSE_CASE'">
            <el-select placeholder="请选择" v-model="rowData.caseHaltCategory" disabled>
              <el-option v-for="{index,name,code} in $dict.getDictData('CaseHaltCategory')" :key="index" :label="name" :value="code" disabled>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="停催到期时间" v-if="rowData.applyCategory==='PAUSE_CASE'">
            <el-date-picker v-model="rowData.pauseDueTime" type="date" placeholder="请选择日期" readonly @change="pauseDueTimeChange">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 流转 -->
      <el-form-item label="流转去向" v-if="rowData.applyCategory==='TURN_CASE'">
        <el-select placeholder="请选择" v-model="rowData.turnGoal" disabled>
          <el-option v-for="{index,name,code} in $dict.getDictData('TurnGoal')" :key="index" :label="name" :value="code" disabled>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 协催 -->
      <el-form-item label="协催类型" v-if="rowData.applyCategory==='ASSIT_COLLECTOR'">
        <el-select placeholder="请选择" v-model="rowData.assistType" disabled>
          <el-option v-for="{index,name,code} in $dict.getDictData('AssistType')" :key="index" :label="name" :value="code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="协催到期时间" v-if="rowData.assistType==='ASSIT_VISIT'">
        <el-date-picker v-model="rowData.visitEndDate" type="date" placeholder="请选择日期" readonly>
        </el-date-picker>
      </el-form-item>
      <!-- 划扣 -->
      <template v-if="rowData.applyCategory==='REPAY_AUTO'">
        <el-form-item label="划扣类型">
          <el-radio disabled v-model="rowData.repaymentType" label="PERIOD">期数划扣</el-radio>
          <el-radio disabled v-model="rowData.repaymentType" label="MONEY">金额扣划</el-radio>
          <el-radio disabled v-model="rowData.repaymentType" label="ADVANCE">提前结清</el-radio>
        </el-form-item>
        <el-form-item label="期数划扣" v-if="rowData.repaymentType === 'PERIOD'">
          <el-input disabled v-model="rowData.repaymentPeriods" type="number">
            <template slot="append">期</template>
          </el-input>
        </el-form-item>
        <el-form-item label="金额扣划" v-if="rowData.repaymentType === 'MONEY'">
          <el-input disabled v-model="rowData.repayAmount" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </template>
      <!-- 息费减免 -->
      <el-form-item label="减免详情" v-if="rowData.applyCategory==='DERATE_CASE'">
        <data-box :data="dreateCaseData" style="padding-left: 0px;" hiddenIndex>
          <template slot="columns">
            <el-table-column prop="waivers" label="减免项" :formatter="(row) => $filter.encryptWaivers(row.waivers)" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="actualAmount" label="实际金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="derateAmounts" label="减免金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <!-- 展期申请 -->
      <el-form-item label="展期天数" v-if="rowData.applyCategory==='LOAN_EXTENSION'">
        <el-input disabled v-model="rowData.extensionDays" type="number">
          <template slot="append">天</template>
        </el-input>
      </el-form-item>
      <!-- 坏账确认 -->
      <data-box :data="badDebtsData" style="padding-left: 0px;" :page="pageService" @onPageChange="refreshDataBox" v-if="rowData.applyCategory==='VERIFY_DESTORY'" hiddenIndex>
        <template slot="columns">
          <el-table-column prop="caseNumber" label="借据号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="personalName" label="客户名称" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="personalNo" label="客户编号" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="overdueAmount" label="坏账金额" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          </el-table-column>
        </template>
      </data-box>
      <el-form-item label="坏账金额合计" v-if="rowData.applyCategory==='VERIFY_DESTORY'" hiddenIndex>
        {{$filter.toThousands(this.totalBadAmount)}}元
      </el-form-item>
      <!-- 策略审批 -->
      <el-form-item label="策略详情" v-if="rowData.applyCategory==='CREATE_STRATEGY'||rowData.applyCategory==='UPDATE_STRATEGY'||rowData.applyCategory==='DELETE_STRATEGY'">
        <el-button @click="openModifyConfig()">查看策略</el-button>
      </el-form-item>
      <!-- 查看附件 -->
       <el-form-item label="查看附件" v-if="rowData.applyCategory==='LABEL_PAUSE'||rowData.applyCategory==='DERATE_CASE'||rowData.applyCategory==='LOAN_EXTENSION'||rowData.applyCategory==='VERIFY_DESTORY'">
        <el-button  @click="openViewAttachList()">查看附件</el-button>
      </el-form-item>
      <!-- 公共 -->
      <el-form-item label="申请人">
        <el-input readonly :value="rowData.applyRealName"></el-input>
      </el-form-item>
      <el-form-item label="申请原因" v-if="rowData.applyCategory!=='REPAY_AUTO'&&rowData.applyCategory!=='PAUSE_CASE'">
        <el-input type="textarea" :maxlength="500" :value="rowData.applyDescription" readonly></el-input>
      </el-form-item>
      <el-form-item label="审批历史">
        <data-box :data="recordHistory" style="padding-left: 0px;">
          <template slot="columns">
            <el-table-column prop="approvalRealName" label="审批人" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="approvalTime" label="审批时间" :formatter="(row) => $filter.dateTimeFormat(row.approvalTime)" :min-width="$helper.getColumnWidth(5)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="applyStatus" label="审批结果" :formatter="(row) => $filter.dictConvert(row.applyStatus,'ApplyStatus')" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="approvalOpinion" label="审批意见" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
            </el-table-column>
          </template>
        </data-box>
      </el-form-item>
      <el-form-item label="审批意见" prop="approvalOpinion" v-if="rowData.applyStatus==='PENDING'&& rowData.commonFlag === 'YES'">
        <el-input type="textarea" :maxlength="500" v-model="applyModel.approvalOpinion" :readonly="rowData.applyStatus!=='PENDING'"></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button" v-if="rowData.applyStatus==='PENDING'&& rowData.commonFlag === 'YES'">
      <el-button @click="commit('REJECT')" :loading="submitLoading">拒绝</el-button>
      <el-button @click="commit('PASS')" :loading="submitLoading">同意</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import DataBox from '~/components/common/data-box.vue';
import { Dependencies } from '~/core/decorator';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { State, Getter, Action, namespace } from 'vuex-class';
import { CaseApplyRecordService } from '~/services/domain-service/case-apply-record.service';
import { CaseVerifyService } from '~/services/domain-service/case-verify.service';
import { PageService } from '~/utils/page.service';

const CollectionExecution = namespace('collection-execution');

@Component({
  components: {
    DataBox,
  },
})
export default class CaseApprovalCommon extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(CaseApplyRecordService)
  private caseApplyRecordService: CaseApplyRecordService;
  @Dependencies(CaseVerifyService)
  private caseVerifyService: CaseVerifyService;
  private submitLoading: boolean = false;
  private rules: any = {
    applyStatus: [{ required: true, message: '请选择审批状态' }],
    approvalOpinion: [{ required: true, message: '请输入审批意见' }]
  };
  private applyModel: any = {
    applyStatus: 'PASS',
    approvalOpinion: '',
    id: '',
  };
  private recordHistory: any[] = [];
  private badDebtsData: any[] = [];
  private verifyBatchNumber: any = '';
  private totalBadAmount: any = '';
  @CollectionExecution.State('perDueDate')
  private perDueDate;
  @Prop({ required: true })
  private rowData: any;
  @Prop()
  private dreateCaseData;
  @Watch('rowData', { immediate: true })
  private idChange(value) {
    console.log(value,"value")
    this.applyModel.approvalOpinion = '';
    this.applyModel.id = value.id;
    this.caseApplyRecordService
      .recordHistory({ applyId: value.id })
      .subscribe((data) => {
        this.recordHistory = data;
      });
    if(value.applyCategory==='VERIFY_DESTORY'){
      this.verifyBatchNumber = value.verifyBatchNumber
      this.caseApplyRecordService
      .getCaseApplyInfo(this.verifyBatchNumber,this.pageService)
      .subscribe((data) => {
        this.badDebtsData = data;
      });
      this.caseApplyRecordService
      .getTotalBadAmount(this.verifyBatchNumber)
      .subscribe((data) => {
        this.totalBadAmount = data;
      });
    }
  }
  private refreshDataBox(){
    this.verifyBatchNumber = this.rowData.verifyBatchNumber
    this.caseApplyRecordService
      .getCaseApplyInfo(this.verifyBatchNumber,this.pageService)
      .subscribe((data) => {
        this.badDebtsData = data;
      });
      this.caseApplyRecordService
      .getTotalBadAmount(this.verifyBatchNumber)
      .subscribe((data) => {
        this.totalBadAmount = data;
      });
  }
  @Emit('close')
  private close() {
    this.reset();
  }
  @Emit('openModifyConfig')
  private openModifyConfig() {

  }
  @Emit('openViewAttachList')
  private openViewAttachList() {

  }

  private reset() {
    const form: any = this.$refs['form'];
    form.resetFields();
  }

  private commit(applyStatus) {
    const form: any = this.$refs['form'];
    form.validate((result) => {
      if (!result) return;
      this.applyModel.applyStatus = applyStatus;
      this.submitLoading = true;
      this.caseApplyRecordService.dealApply(this.applyModel).subscribe(
        (data) => {
          this.submitLoading = false;
          this.$message.success('审批成功');
          this.close();
        },
        (err) => {
          this.submitLoading = false;
        },
      );
    });
  }

  private pauseDueTimeChange() {
    console.log(this.perDueDate)
  }
}
</script>

<style lang="less">
.component.case-approval-common {
  .data-box > * {
    padding: 0 !important;
  }
}
</style>
